<template>
  <div>
    <el-button type="primary" round @click="addsRoles">添加角色</el-button>
    <el-input
      placeholder="请输入您要查找的ID"
      v-model="input"
      clearable
      style="width: 300px"
    >
    </el-input>
    <el-button
      type="info"
      icon="el-icon-zoom-in"
      circle
      @click="LookRolesUser"
    ></el-button>
    <el-table :data="rolesData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- 一级 -->
          <el-row
            class="bottom"
            v-for="(item, k) in scope.row.children"
            :key="k"
          >
            <el-col :span="5" width="10px">
              <el-button type="primary" round>
                {{ item.authName }}
                <span
                  class="el-icon-close"
                  @click="deleteQX(scope.row, item.id)"
                ></span
              ></el-button>
            </el-col>
            <!-- 第二层 -->
            <el-col :span="19">
              <el-row v-for="(item1, k1) in item.children" :key="k1">
                <el-col :span="4" class="item2width" width="10px">
                  <el-button type="success" round
                    >{{ item1.authName
                    }}<span
                      class="el-icon-close"
                      @click="deleteQX(scope.row, item1.id)"
                    ></span
                  ></el-button>
                </el-col>
                <!-- 第三曾 -->
                <el-col
                  width="10px"
                  :span="4"
                  v-for="(item2, k2) in item1.children"
                  :key="k2"
                >
                  <el-button round>
                    {{ item2.authName
                    }}<span
                      class="el-icon-close"
                      @click="deleteQX(scope.row, item2.id)"
                    ></span>
                  </el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column prop="id" label="角色ID"> </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
      <!-- 删除 -->
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteRoles(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- 修改状态 -->
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="editroles(scope.row)"
            circle
            icon="el-icon-edit"
          >
          </el-button>
        </template>
      </el-table-column>
      <!-- 角色分配 -->
      <el-table-column label="分配">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-star-off"
            @click="Disroles(scope.row)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加角色 -->
    <el-dialog title="添加角色" :visible.sync="dialogAddsVisible">
      <el-form :model="addsRolesData">
        <el-form-item label="角色名称">
          <el-input v-model="addsRolesData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addsRolesData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addsData">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑角色 -->
    <el-dialog title="编辑角色" :visible.sync="dialogEditVisible">
      <el-form :model="addsRolesData">
        <el-form-item label="角色名称">
          <el-input v-model="addsRolesData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addsRolesData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditUsers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色分配 -->
    <el-dialog title="角色分配" :visible.sync="dialogDisVisible">
      <el-form>
        <el-tree
          :getCheckedKeys="true"
          :data="DisRolesData"
          show-checkbox
          default-expand-all
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
        >
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDisVisible = false">取 消</el-button>
        <el-button type="primary" @click="DisRolesUsers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色查询ID -->
    <el-dialog title="角色查询" :visible.sync="dialogLookVisible">
      <el-form :model="rolesDatas">
        <el-form-item label="角色名称">
          <el-input v-model="rolesDatas.roleName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色ID">
          <el-input v-model="rolesDatas.roleId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="rolesDatas.roleDesc" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="LookRoles">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolesData: [],
      rolesDatas: {}, //根据id查询到的值
      //添加角色
      addsRolesData: {
        roleName: "",
        roleDesc: "",
      },
      dialogAddsVisible: false, //添加弹窗
      //编辑角色
      EditRolesData: {},
      dialogEditVisible: false, //编辑弹窗
      //角色分配
      RolesListID: {},
      DisRolesData: [], // 储存角色分配的值 -- 全部的
      defaultProps: {
        children: "children",
        label: "authName",
      },
      checkedKeys: [], //循环角色分配中有的权限
      dialogDisVisible: false, //角色分配
      //查找ID
      input: "",
      dialogLookVisible: false,
    };
  },
  created() {
    this.getRoles();
  },
  methods: {
    //删除角色权限
    async deleteQX(userinfo, rightid) {
      var con = confirm("你确定要删除这个权限吗？");
      if (con == true) {
        var { data } = await this.$req.delete(
          `/roles/${userinfo.id}/rights/${rightid}`
        );
        if (data.meta.status == 200) {
          this.$message({
            showClose: true,
            message: "恭喜你，角色编辑成功",
            type: "success",
          });
          this.getRoles();
        } else {
          this.$message.error(data.meta.msg);
        }
      }
    },
    //查询ID
    async LookRolesUser() {
      if (!this.input == "") {
        this.dialogLookVisible = true;
        var { data } = await this.$req.get("/roles/" + this.input);
        if (data.meta.status == 200) {
          this.$message({
            showClose: true,
            message: "恭喜你，获取ID成功",
            type: "success",
          });
          this.rolesDatas = data.data;
        } else {
          this.$message.error(data.meta.msg);
        }
      } else {
        this.$message.error("请输入你要查询的角色ID");
      }
    },
    //查询ID -- 弹窗 -- 关
    LookRoles() {
      this.dialogLookVisible = false;
      // this.rolesDatas = {};
    },
    //分配用户 -- 弹窗
    async Disroles(RolesList) {
      console.log(RolesList);
      this.RolesListID = RolesList;
      var { data } = await this.$req.get("/rights/tree");
      this.DisRolesData = data.data;
      var keys = [];
      RolesList.children.forEach((item1) => {
        item1.children.forEach((item2) => {
          item2.children.forEach((item3) => {
            keys.push(item3.id);
          });
        });
      });
      this.checkedKeys = keys;
      this.dialogDisVisible = true;
    },
    //分配用户
    async DisRolesUsers() {
      // console.log(this.RolesListID);
      var data = await this.$req.post(`/roles/${this.RolesListID.id}/rights`);
      // console.log(data);
    },
    //编辑用户
    async EditUsers() {
      // console.log(this.addsRolesData);
      console.log(this.EditRolesData);
      var { data } = await this.$req.put(
        "/roles/" + this.EditRolesData.id,
        this.addsRolesData
      );
      if (data.meta.status == 200) {
        this.$message({
          showClose: true,
          message: "恭喜你，角色编辑成功",
          type: "success",
        });
        this.dialogEditVisible = false;
        this.getRoles();
        this.addsRolesData = {};
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //编辑用户 -- 弹窗
    editroles(userinfo) {
      this.EditRolesData = userinfo;
      this.dialogEditVisible = true;
    },
    // 删除用户
    async deleteRoles(userinfo) {
      console.log(userinfo);
      var { data } = await this.$req.delete("/roles/" + userinfo.id);
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          showClose: true,
          message: "恭喜你，角色删除成功",
          type: "success",
        });
        this.getRoles();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //添加用户
    async addsData() {
      var { data } = await this.$req.post("/roles", this.addsRolesData);
      if (data.meta.status == 201) {
        this.$message({
          showClose: true,
          message: "恭喜你，角色添加成功",
          type: "success",
        });
        this.dialogAddsVisible = false;
        this.getRoles();
        this.addsRolesData = {};
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //添加用户 -- 弹窗
    addsRoles() {
      this.dialogAddsVisible = true;
    },

    //渲染角色页面
    async getRoles() {
      var { data } = await this.$req.get("/roles");
      this.rolesData = data.data;
      // console.log(this.rolesData);
    },
  },
  mounted() {},
};
</script>

<style>
#A {
  width: 200px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: 100px;
  left: 220px;
  color: black;
}
</style>